<template>
  <div class="wrap">
    <div class="content">
      <template v-if="data.orderStatus === 4">
        <el-alert
          :title="`此订单已于 ${data.cancelDate} 被取消`"
          type="warning"
          show-icon>
        </el-alert>
      </template>
      <!-- 订单信息 -->
      <div class="season">
        <el-row :gutter="24">
          <el-col :span="24">
            <h4 class="title">店铺与用户信息</h4>
            <el-card shadow="hover">
              <el-descriptions
                :column="1"
                size="medium"
                :labelStyle="{
                  width: '100px'
                }"
              >
                <el-descriptions-item label="店铺名">
                  sdfsdf
                </el-descriptions-item>
                <el-descriptions-item label="自定义店铺名">
                  fffff
                </el-descriptions-item>
                <el-descriptions-item label="用户名">
                 ffsdafasfsdafasd
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          <el-col :span="24" class="mgb20">
            <h4 class="title">订单信息</h4>
            <el-card shadow="hover">
              <div class="order-content">
                <div class="header">
                  <div class="left">
                    <div style="display: inline">
                      <el-tag
                        type="untreated"
                        effect="dark"
                        class="order-status-tag"
                      >
                        未处理
                      </el-tag>
                    </div>
                    <div class="order-no">
                      #3333 | 2023-07-06 15:18:42
                    </div>
                  </div>
                  <div class="right">
                    <div class="buyer">
                      Luis Miguel Vargas Salinas
                    </div>
                  </div>
                </div>

                <div
                  class="item"
                  v-for="(orderGoods,index) in order.orderGoods"
                  :key="index"
                >


                  <div class="cell img">
                    <div class="img-box img-one">
                      <img :src="orderGoods.image"  alt="">
                    </div>
                  </div>
                  <div class="cell goods-info">
                    <p class="listing">{{ orderGoods.goodsId }}</p>
                    <p class="title hidden-1">
                      {{ orderGoods.goodsTitle }}
                    </p>
                    <p class="skuId">
                      SKU：{{ orderGoods.sku }}
                    </p>
                    <p class="sku">
                      Color: Black | Size: S
                    </p>
                  </div>
                  <div class="cell price center">
                    <p class="price-mxn">
                      <span class="currency">MXN $ </span>
                      <span class="price-num">{{ orderGoods.amount || 0}}</span>
                    </p>

                  </div>
                  <div class="cell num center">
                    <p>数量：</p>
                      <span>{{orderGoods.num}}</span>
                  </div>
                </div>
              </div>

            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <el-descriptions
                :column="1"
                size="medium"
              >
                <el-descriptions-item label="商品总额(MXN)">
                  {{ data.amount }}
                </el-descriptions-item>
                <el-descriptions-item label="平台佣金(MXN)">
                  {{ data.salesFee }}
                </el-descriptions-item>
                <el-descriptions-item label="平台运费(MXN)">
                  {{ data.shippingFee }}
                </el-descriptions-item>
              </el-descriptions>
              <hr>
              <el-descriptions
                :column="1"
                size="medium"
                labelClassName="fontOrange"
                contentClassName="fontOrange"
              >
                <el-descriptions-item label="结算总额(MXN)">
                  {{ settlement }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>


        </el-row>
      </div>


      <!--  买家信息   -->
      <div class="season">
        <el-row >
          <el-col :span="24">
            <h4 class="title">买家信息</h4>
            <el-card shadow="hover">
              <el-col class="left" :span="24">
                <el-descriptions
                  :column="1"
                  contentClassName="descriptions-content-buyer"
                >
                  <el-descriptions-item label="买家">
                    {{shipping.receiverName}}
                  </el-descriptions-item>
                  <el-descriptions-item label="地址">
                    {{shipping.address}}
                  </el-descriptions-item>
                  <el-descriptions-item label="电话" v-if="shipping.receiverPhone">
                    {{shipping.receiverPhone}}
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 操作按钮 -->
      <div class="season" style="margin-top: 20px">
        <div class="">
          <el-button type="info" @click="goBack">返回</el-button>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import SelectCountry from "@/views/order/components/SelectCountry";
import SelectShop from "@/views/order/components/SelectShop";
import SelectDeliver from "@/views/order/components/SelectDeliver";
import SelectGoods from "@/views/order/components/SelectGoods";
import SelectOrderStatus from "@/views/order/components/SelectOrderStatus";
import OrderItem from "@/views/order/components/OrderItem2";
import {getCountryCurrency, getCountryIcon} from "@/utils/common";
import DeliverTag from "@/components/Tag/DeliverTag";
import StockTag from "@/components/Tag/StockTag";
import {changeOrderData, changePackageType, getOrder, getOrderList} from "@/api/order";
import DeliveryButton from "@/views/order/components/DeliveryButton";
import StockButton from "@/views/order/components/StockButton";
import IgnoreOrder from "@/views/order/components/IgnoreOrder";
import EditDeliveryButton from "@/views/order/components/EditDeliveryButton";
import ForgetIgnore from "@/views/order/components/ForgetIgnore";
import DeleteStockOrder from "@/views/order/components/deleteStockOrder";
import {deepCopy} from "@/utils";
import EditOrder1688Button from "@/views/order/components/EditOrder1688Button";
import Order1688Tag from "@/components/Tag/Order1688Tag";
import Ali1688Button from "@/views/order/components/Ali1688Button.vue";
import ProcureButton from "@/views/order/components/ProcureButton.vue";
import StickerPackage from "@/views/order/components/stickerPackage.vue";

export default {
  name: "orderInfo",
  components: {

  },
  computed:{

  },
  data(){
    return {
      getCountryIcon,
      data: {},

      orderId: '',
      order: {},

      shipping: {},
    }
  },
  created() {
    this.setQueryParams()
    this.getData();
    getOrderList()
      .then(res=>{
        this.order = res.data[0]
      })
  },
  methods:{
    getCountryCurrency,
    setQueryParams(){
      this.orderId = 123
    },
    // 获取表单数据
    getData(){
      getOrder(this.orderId)
        .then(res=>{
          return;
          this.data = res.data
          this.orderGoods = res.data.orderGoods[0]
          this.shipping = res.data.shipping;
          this.express = deepCopy(res.data.stickerOrder.express || {})
          this.stickerOrder = deepCopy(res.data.stickerOrder);
          this.orderForm.remark = this.data.stickerOrder.remark || '';
        })
    },

    // 返回上一页
    goBack(){
      this.$router.push({
        name: 'orderList',
      })
    },
    changeOrder(){
      this.$router.go(0) // 刷新当前页面
    },

  }
}
</script>

<style scoped lang="less">
.wrap {
  padding: 10px 30px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{

  }
}

</style>

<style lang="less">
.channel-form{
  &.el-form{
    .el-form-item__label{
      word-break: break-word;
    }
  }
}
.channel-box-card{
  .el-card__header{
    padding: 5px 10px;
    font-size: 12px;
    line-height: 26px;
  }
  .el-card__body{
    padding: 0;
  }
}
.season{
  .shop-user-info{
    width: 100%;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .shop-user-text{
    font-size: 12px;
    color: #FF0000;
  }
  .card-order-info{
    .order-header{
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 20px;
    }
  }

}
.descriptions-content{
  font-weight: bold;
}
.order-content{
  .header{
    font-size: 13px;

    display: flex;
    justify-content: space-between;
    .order-no{
      display: inline-block;
      font-weight: bold;
      margin-left: 20px;
    }
  }
  .order-goods-info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100px;
    .goods-id{
      font-weight: 650;
      font-style: normal;
      font-size: 13px;
      color: #555555;
    }
    .goods-title{
      font-weight: 500;
      font-style: normal;
      font-size: 13px;
      color: #AAAAAA;
    }
    .goods-SKU{
      font-weight: 500;
      font-style: normal;
      font-size: 13px;
      color: #555555;
    }
    .goods-SKU-info{
      font-weight: 400;
      font-style: normal;
      font-size: 13px;
      color: #7F7F7F;
    }

  }
  .goods-price{
    .price-item{
      margin-bottom: 3px;
      font-size: 13px;
      .currency{
        font-weight: 500;
        font-style: normal;
        color: #AAAAAA;
        margin-right: 10px;
      }
      .price{
        color: #009C46;
        font-weight: 500;
        font-style: normal;
      }
    }
  }
  .goods-num{
    font-size: 13px;
    .text{
      color: #AAAAAA;
      font-weight: 500;
      font-style: normal;
    }
    .num{
      color: #FC6347;
      font-weight: 500;
      font-style: normal;
    }
  }
}

.card-goods-origin{
  position: relative;
  font-size: 13px;
  .card-tag{
    position: absolute;
    right: 0;
    top: 0;
  }
  .goods-origin-header{
    margin-bottom: 10px;
    .title{
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
    }
  }
  .goods-origin-content{
    .goods-info{
      display: inline-block;
      .goods-title{
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        color: #AAAAAA;
      }
      .goods-listing{
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
      }
    }
    .logistics{
      margin-top: 20px;
      p{
        margin: 0;
        padding: 0;
      }
      .logistics-item{
        margin-bottom: 10px;
        .time{
          font-weight: 400;
          font-style: normal;
          font-size: 12px;
          color: #AAAAAA;
          margin-bottom: 5px;
        }
        .text{
          font-size: 14px;
          font-weight: 400;
          font-style: normal;
        }
      }
    }
  }
}
.mgr10{
  margin-right: 10px;
}
.mgr20{
  margin-right: 20px;
}
.fontOrange{
  color: #FC6347;
  font-weight: bold;
}
.goods-box{
  display: flex;
  .goods-image{
    height: 50px;
    width: 50px;
    margin-right: 20px;
  }
  .goods-title{
    width: 70%;

    .title{
      font-weight: 500;
      font-style: normal;
      font-size: 13px;
      color: #AAAAAA;
    }
    .listing{
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
    }
  }
}
.stock-tips{
  font-weight: 650;
  font-style: normal;
  font-size: 12px;
  color: #FF0000
}
.remark-input{

}
.remark-button{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.remark-card{
  //min-height: 100px;
}
.order-content{
  .item{
    p{
      margin: 0;
      padding: 0;
    }
    font-size: 13px;
    display: flex;
    margin: 5px 0;
    .checkbox{
      text-align: center;
      width: 50px;
      line-height: 100px;
    }
    .expand{
      position: relative;
      color: #666;
      font-size: 12px;
      width: 20px;
      height: 20px;
      text-align: center;
      margin-right: 3px;
      top: 43px;
      cursor: pointer;
    }
    .expand--active{
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      left: -2px;
    }
    .img{
      width: 100px;
      height: 100px;
    }
    .center{
      text-align: center;
    }
    .goods-info{
      line-height: 20px;
      width: 600px;
      .listing{
        font-weight: 650;
        font-size: 13px;
        color: #555555;
      }
      .title{
        font-weight: 500;
        color: #AAAAAA;
      }
      .skuId{
        font-weight: 500;
        color: #555555;
      }
      .sku{
        font-weight: 400;
        color: #7F7F7F;
      }
    }
    .img-box{
      width: 90px;
      height: 90px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding: 3px;
      background-color: #eee;
      border-radius: 5px;

      img{
        width: 40px;
        height: 40px;
      }
    }
    .img-one {
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      img{
        width: 80px;
        height: 80px;
      }
    }
    .price{
      min-width: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 500;
      p{
        margin: 5px auto;
      }
      .currency{
        color: #AAAAAA;
      }
      .price-num{
        color: #009C46;
      }
    }
    .num{
      min-width: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 600;
      .text{
        color: #AAAAAA;
      }
      .number{
        color: #FC6347;
      }
    }
    .operate{
      margin-left: auto;
      min-width: 300px;
      line-height: 100px;
      text-align: right;
    }
    .is-right{
      text-align: right;
    }
  }
}
</style>
